<template>
    <!-- <a-list
        v-if="comments.length"
        :data-source="comments"
        :header="`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`"
        item-layout="horizontal"
    >
        <template #renderItem="{ item }">
            <a-list-item>
                <a-comment
                    :author="item.author"
                    :avatar="item.avatar"
                    :content="item.content"
                    :datetime="item.datetime"
                />
            </a-list-item>
        </template>
    </a-list> -->
    <a-comment>
        <template #avatar>
            <a-avatar v-if="userStore.isLogin" :src="userStore.userinfo.avatar" alt="Han Solo" />
        </template>
        <template #content>
            <a-form-item>
                <a-textarea v-model:value="contentValue" :rows="4" placeholder="留下你的评论吧！" />
            </a-form-item>
            <a-form-item class="text-right">
                <a-button html-type="submit" :loading="loading" type="primary" @click="handleSubmit"> 评论 </a-button>
            </a-form-item>
        </template>
    </a-comment>
</template>
<script lang="ts" setup>
import { useRequest } from "alova/client";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import { ref } from "vue";

import type { CommentEntity } from "@/api/globals";
import { useUserStore } from "@/stores/user";
import { Feedback } from "@/utils/feedback";

dayjs.extend(relativeTime);

const props = defineProps<{
    targetId: number;
}>();
const emits = defineEmits<{
    (e: "submit-success", comment: CommentEntity): void;
}>();

type Comment = Record<string, string>;

const comments = ref<Comment[]>([]);
const contentValue = ref<string>("");

const userStore = useUserStore();
const router = useRouter();

const { data, send, loading } = useRequest(
    () =>
        Apis.Comments.create({
            data: {
                targetId: props.targetId,
                parentId: 0,
                content: contentValue.value
            }
        }),
    {
        immediate: false
    }
);

const handleSubmit = async () => {
    if (!contentValue.value) {
        Feedback.msgWarning("请输入内容！");
        return;
    }
    if (!userStore.isLogin) {
        Feedback.msgWarning("请先登录！");
        router.push("/auth/login");
        return;
    }
    await send({
        data: {
            targetId: props.targetId,
            parentId: 0,
            content: contentValue.value
        }
    });
    emits("submit-success", data.value?.data);
    contentValue.value = "";
    Feedback.msgSuccess("评论成功");
};

// const handleSubmit = () => {
//     if (!value.value) {
//         return;
//     }

//     loading.value = true;

//     setTimeout(() => {
//         loading.value = false;
//         comments.value = [
//             {
//                 author: "Han Solo",
//                 avatar: "https://joeschmoe.io/api/v1/random",
//                 content: value.value,
//                 datetime: dayjs().fromNow()
//             },
//             ...comments.value
//         ];
//         value.value = "";
//     }, 1000);
// };
</script>
